<template>
  <div class="container">
    <div class="login-modal">
      <div class="welcome">welcome</div>
      <div class="title">
        欢迎登陆<br />
        电子招标系统平台
      </div>
      <el-form ref="form" :model="form" label-width="0px" class="login-form">
        <el-form-item label="">
          <el-input placeholder="输入账号" v-model="input3">
            <img style="width: 22px;" slot="prefix" src="@/assets/images/mail.png" alt="">
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input placeholder="请输入密码" v-model="input" show-password>
            <img style="width: 22px;" slot="prefix" src="@/assets/images/lock-on.png" alt="">
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input class="image-inp" placeholder="输入验证码" v-model="input3">
            <img style="width: 22px;" slot="prefix" src="@/assets/images/qrcode.png" alt="">
            <img style="width: 145px;height: 64px;" slot="suffix" src="@/assets/images/qrcode.png" alt="">
          </el-input>
        </el-form-item>
        <el-button class="login-btn" type="primary" @click="onSubmit">登陆</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onSubmit() {
      
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: calc(100vh - 72px);
  background: url('~@/assets/images/login-bg.png');
  position: relative;
  .login-modal{
    width: 496px;
    height: 656px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
    border-radius: 4px;
    opacity: 0.95;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    .welcome{
      font-size: 110px;
      font-weight: 600;
      color: rgba(58,27,0,0.02);
    }
    .title{
      font-size: 48px;
      font-weight: 600;
      margin-left: 40px;
      margin-top: -72px;
      margin-bottom: 40px;
    }
    .login-form{
      padding: 0 48px;
      ::v-deep .el-form-item{
        margin-bottom: 32px;
      }
      ::v-deep .el-input{
        font-size: 16px;
      }
      ::v-deep .el-input__inner{
        border: none;
        border-radius: 0;
        border-bottom:2px solid #D8D8D8;
        padding-left: 38px;
        height: 46px;
        line-height: 46px;
      }
      .image-inp ::v-deep .el-input__suffix{
        top: -20px;
      }
      .login-btn{
        width: 400px;
        height: 56px;
        background: #006FE1;
        border-color: #006FE1;
        font-size: 24px;
        font-weight: 400;
        border-radius: 4px;
        margin-top: 40px;
      }
    }
  }
}

@media (max-width:1512px) {
  .container {
    height: calc(100vh - 54px);
  }
}
</style>